import React from 'react';
import echarts from 'echarts';
import ReactEChart from './ReactEChart';

const getConfig = ({ name, value }) => ({
  series: [
      {
        name: name,
        type: 'gauge',
        radius: 90,
        detail: {
          textStyle: {
            color: '#000',
            fontSize: 22,
          },
        },
        axisLine: {
          lineStyle: {
            width: 8,
            color: [[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: 'rgb(68, 198, 255)',
            }, {
              offset: 1,
              color: 'rgb(255, 70, 90)',
            }])]],
          },
        },
        splitLine: {
          length: 10,
        },
        axisTick: {
          length: 4,
          lineStyle: {
            opacity: 0.5,
          },
        },
        pointer: {
          width: 2,
          length: '90%',
        },
        itemStyle: {
          normal: {
            color: '#d33',
          },
        },
        title: {
          textStyle: { color: '#888', fontSize: 12 },
        },
        data: [{ value: (value ? value.toFixed(2) : 0), name }],
      },
    ],
});

const GaugeChart = (props) => {
  const config = getConfig(props);
  const height = props.height || 260;
  return (
    <div style={{ height }}>
      <ReactEChart config={config} />
    </div>
  );
};

GaugeChart.propTypes = {
};

export default GaugeChart;
